<template>
	<div>
		<!-- 下载app -->
		<div class="headerBar">
			<div class="headerBar-fixed"></div>
			<i class="download">下载app</i>
			<a href="" class="search">
				<van-icon class="search-icon" name="search" />
			</a>
		</div>
		<div class="ancient-container">
			<!-- 海报 -->
			<div class="poster">
				<img :src="imgwrap1">
			</div>
				<h1>初夏成歌 | 独立摇滚风向标</h1>
				<span>#国语 #摇滚</span>
				<!-- 歌单 -->
			<div class="song-list-box">
				<ul class="song-list">
					<li class="lists" v-for="(item,index) in rockSong"  :key="index">
						<div class="left"><img :src="item.url" alt=""></div>
						<div class="middle">
							<div class="title1">
								<div class="title">{{item.title}}</div>
							</div>
						    <div class="artist">{{item.artist}}</div>	
						</div>
						<div class="time">{{item.time}}</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 下载收藏 -->
		<div class="bottom-bar">
			<div class="safe-area">
				<div class="left">
					<div class="download">
						<img src="../assets/hyimg/download.png" alt="">
						<span>下载</span>
					</div>
					<div class="collect">
						<img src="../assets/hyimg/collect.png" alt="">
						<span>收藏</span>
					</div>
				</div>
				<div class="play-all">
					<van-icon class="play" name="play" />
					<span>播放全部</span>
				</div>
			</div>
		</div>
		<!-- 播放 下一首 -->
		<div class="footBar">
			<div class="player">
				<div class="info">
					<span>暂无歌曲播放</span>
				</div>
				<div class="control">
					<span class="play"></span>
					<span class="next"></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		  name: '',
		  data(){
			  return{
				imgwrap1:require("../assets/hyimg/rockposter.jpg"),
				rockSong:[
					{url:require("../assets/hyimg/rockposter1.jpg"),title:"拥抱之城",artist:"果味VC",time:"04:41"},
					{url:require("../assets/hyimg/rockposter2.jpg"),title:"Catherine",artist:"悶餅MOONBAND",time:"03:53"},
					{url:require("../assets/hyimg/rockposter3.jpg"),title:"南乡子",artist:"游梦岛乐队",time:"03:15"},
					{url:require("../assets/hyimg/rockposter4.jpg"),title:"开心多久",artist:"熊猫眼乐队",time:"03:35"},
					{url:require("../assets/hyimg/rockposter5.jpg"),title:"别伤害了别人，贬低了自己",artist:"咖喱3000",time:"03:15"},
					{url:require("../assets/hyimg/rockposter6.jpg"),title:"硬汉布鲁斯",artist:"宇宙企划乐队",time:"07:14"},
					{url:require("../assets/hyimg/rockposter7.jpg"),title:"飞行员宾馆",artist:"香蕉周刊",time:"04:54"},
					{url:require("../assets/hyimg/rockposter8.jpg"),title:"蝉鸣的夏夜我在榕树下等你，你没有出现",artist:"Mirrors解离的真实",time:"04:48"},
					{url:require("../assets/hyimg/rockposter9.jpg"),title:"森林之歌",time:"08:24"},
					{url:require("../assets/hyimg/rockposter10.jpg"),title:"骑士坠鬼马",artist:"理想混蛋Bestards",time:"03:07"},
					{url:require("../assets/hyimg/rockposter11.jpg"),title:"Hold You Tight",artist:"对角巷乐队",time:"04:49"},
					{url:require("../assets/hyimg/rockposter12.jpg"),title:"所有的星星都会掉下来",artist:"再循环乐队",time:"05:12"},
					{url:require("../assets/hyimg/rockposter13.jpg"),title:"放你进我的行李箱",artist:"埃莉诺",time:"05:06"},
					{url:require("../assets/hyimg/rockposter14.jpg"),title:"The Mannetz Brothers 莫奈兹兄弟",artist:"白虎乐队（Baihu）",time:"06:14"},
					{url:require("../assets/hyimg/rockposter15.jpg"),title:"小丑日记",artist:"大雷音乐队",time:"03:31"},
					{url:require("../assets/hyimg/rockposter16.jpg"),title:"迷失荷尔蒙",artist:"Monster KaR",time:"03:39"},
					{url:require("../assets/hyimg/rockposter17.jpg"),title:"冲浪的花（Surfing die Blumen）",artist:"LOFT BEACH",time:"03:49"}
				]
				  }
				  }
				  }
				  
</script>

<style scoped>
	/* 下载app */
	.headerBar{
		height: 21.74vw;
		position: relative;
	}
	.headerBar .headerBar-fixed{
		position: fixed;
		z-index: 100;
		left: 0;
		top: 0;
		width: 100%;
	    height: 21.74vw;
		border-bottom: .5px solid #e0e0e0;
		background: url(../assets/hyimg/downloadapp.jpg) #fff 50% no-repeat;
		background-size: cover;
		background-color: #fff;
	}
	.headerBar .download{
		position: fixed;
		font-size: 13px;
		height: 8vw;
		line-height: 8vw;
		z-index: 102;
		top: 7vw;
		right: 19vw;
		display: block;
		font-style: normal;
		padding: 0 10px;
		border-radius: 2px;
		color: #fafafa;
		opacity: .9;
		background-color: #e61723;
	}
	.headerBar a .search-icon{
		width: auto;
		position: fixed;
		font-size: 5.3vw;
		right: 0;
		top: 8px;
		z-index: 101;
		padding: 7vw 30px;
	}
	.ancient-container{
		padding-bottom: 100px;
		overflow: hidden;
		background-color: #fff;
	}
	/* 海报 */
	.ancient-container .poster{
		text-align: center;
		background-color: #f8f8f8;
	}
	.ancient-container .poster img{
		max-width: 100%;
		vertical-align: middle;
	}
	.ancient-container  h1{
		font-size: 4.83vw;
		text-align: left;
		padding: 30px 30px 0 38px;
		margin-bottom: 0.399786rem;
	}
	.ancient-container span{
		margin-top: 1.45vw;
		font-size: 2.9vw;
		margin-right: 62.45vw;
		font-weight: 300;
		padding-left: 1.012793rem;
	}
	/* 歌单 */
	.ancient-container .song-list-box{
		padding: 0 30px 0 38px;
		margin-top: 0.399786rem;
	}
	.ancient-container .song-list-box .song-list{
		border-top: .5px solid #eee;
	}
	.ancient-container .song-list-box .song-list .lists{
		border-bottom: .5px solid #eee;
		padding: 10px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.ancient-container .song-list-box .song-list .lists .left{
		margin-right: 3.14vw;
		flex: 0 0 auto;
	}
	.ancient-container .song-list-box .song-list .lists img{
		height: 12.08vw;
		width: 12.08vw;
	}
	.ancient-container .song-list-box .song-list .lists .middle{
		flex: 1 1 0%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		display: block;
	}
	.ancient-container .song-list-box .song-list .lists .middle .title{
		font-size: 2.9vw;
		font-weight: 700;
		margin-bottom: 0.133262rem;
	}
	.ancient-container .song-list-box .song-list .lists .title{
		display: inline-block;
		vertical-align: middle;
		max-width: 90%;
	}
	.ancient-container .song-list-box .song-list .lists .artist{
		font-size: 2.66vw;
		font-weight: 300;
	}
	.ancient-container .song-list-box .song-list .lists .time{
		flex: 0 0 auto;
		font-size: 2.66vw;
		font-weight: 300;
	    margin-left: 10px;
	}
	/* 下载收藏 */
	.bottom-bar{
		width: 100%;
		background-color: #f7f7f7;
		position: fixed;
	    left: 0;
		bottom: 49px;
		z-index: 9;
	    padding: 0 0 env;
	}
	.bottom-bar .safe-area{
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30px;
		height: 54px;
		justify-content: space-between;
	}
	.bottom-bar .left{
		display: flex;
		align-items: center;
	}
	.bottom-bar .left .download{
		color: #af9c7c;
		font-size: 14px;
	}
	.bottom-bar .left .download img{
		width: 18px;
		height: 18px;
		vertical-align: middle;   
	}
	.bottom-bar .left .download span{
		margin-left: 4px;
	}
	.bottom-bar .left .collect{
		margin-left: 20px;
		color: #af9c7c;
		font-size: 14px;
	}
	.bottom-bar .left .collect img{
		width: 18px;
		height: 18px;
		vertical-align: middle;   
	}
	.bottom-bar .left .collect span{
		margin-left: 4px;
	}
	.bottom-bar .play-all{
		padding: 8px 20px;
		border: .5px solid #a8a8a8;
		border-radius: 20px;
		font-size: 14px;
	}
	.bottom-bar .play-all .play{
		font-size: 12px;
	}
	.bottom-bar .play-all span{
		font-size: 14px;
		margin-left: 2px;
	}
	/* 播放 下一首 */
	.footBar{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 9998;
		background-color: #fff;
		box-sizing: border-box;
		padding-bottom: env;
	}
	.footBar .player{
		line-height: 19px;
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		color: #333;
		padding: 0 30px;
		height: 49px;
		z-index: 2;
	}
	.footBar .player .info{
		flex: 1;
		font-size: 11px;
		padding-right: 138px;
		max-width: 68%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.footBar .player .info span{
		font-size: 11px;
		color: #000;
		display: inline-block;
	}
	.footBar .player .control .play{
		background-image: url(../assets/hyimg/play.png);
		width: 27px;
		height: 27px;
		display: inline-block;
		vertical-align: middle;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-left: 20px;
		}
	.footBar .player .control .next{
		background-image: url(../assets/hyimg/next.png);
		width: 27px;
		height: 27px;
		display: inline-block;
		vertical-align: middle;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-left: 20px;
		}
</style>
